<template>
    <section class="user-info">
        <div class="inner">
            <div class="title">
                个人信息
                <img class="expert" src="../../assets/hfdr.png" alt="dr">
            </div>
            <div class="body">
                <div class="header clearfix">
                    <div class="avater">
                        <img src="../../assets/meirong1.jpg" alt="">
                    </div>
                </div>
                <div class="details">
                    <p class="user-name">姓名：汪峰</p>
                    <p class="user-name">职务：主治医生</p>
                    <p>擅长：<span>户外旅游，音乐舞蹈，表演唱歌，交友谈心，汽车驾驶</span></p>
                    <p>任职医院：上海市黄浦区第一人民医院 整形专科</p>
                </div>
            </div>
            <div class="option">
                <span class="option-btn half">加关注</span>
                <span class="option-btn half">发私信</span>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        name: 'UserInfo',

        methods: {

        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .user-info {
        background-color: #fff;
        border: 1px solid @border-color;
        padding:0px 7px 19px 7px;
        .title {
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            position: relative;
            padding-left: 10px;
            &:before {
                content: '';
                width: 3px;
                height: 22px;
                background-color: @theme-color-dark;
                position: absolute;
                top: 14px;
                left: 0;
            }
            .expert {
                position: absolute;
                right: 0;
                top: 16px;
            }
        }
        .header {
            margin-bottom: 15px;
            .avater {
                width: 237px;
                height: 290px;
                float: left;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .user-name {
                float: left;
                height: 44px;
                line-height: 44px;
                color: #333;
                font-size: 16px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
        .details, .connect-info {
            margin-bottom: 10px;
            p {
                font-size: 14px;
                color: #333;
                span{
                    color: @theme-color-dark;
                }
            }
        }
        .option {
            .option-btn {
                display: inline-block;
                width: 100%;
                text-align: center;
                height: 32px;
                line-height: 32px;
                font-size: 16px;
                border-radius: 4px;
                background-color: @theme-color-dark;
                border-bottom: 2px solid #f4162d;
                color: #fff;
                cursor: pointer;
            }
            .half {
                width: 47%;
                &:first-child {
                    margin-right: 10px;
                }
            }
        }
    }
</style>
